VisualHMI - 画图

本章节主要介绍LUA脚本使用API进行线、矩形、圆、椭圆、文字、图片等

适用范围：VisualHMI - HMI&M系列

例程下载链接：ViusalHMI - 画图(点击下载)

1.Lua API说明

1.on_draw(screen,control)

控件自绘接口函数，要使用自绘功能，控件ID不能为0。

当界面的显示内容需要更新时，系统自动调用此函数，用户在此函数中添加自定义的绘图操作。

[!note|tip:注意] 1.该函数为系统回调函数，用户不要直接调用

2.相关draw_xx 图形，需要在该回调函数里面调用执行

3.路径相关的绘制：如draw_surface，需要在实体屏上测试，虚拟屏不支持

下面几种情况会触发此函数：

  • 界面有动画播放、视频播放、RTC时间显示的动态刷新；
  • 用户操作屏幕控件控件；
  • 通过LUA脚本或串口指令更新控件；
  • 通过执行redraw

若要绘制的图形有上下图层关系，如图片1绘制到图片2上层，可通过建立不同“画板”id实现。如下所示，添加两个矩形框作为“画板”，其中层次关系，从下到上依次为文本控件→蓝色矩形→黄色矩形

image-20231107105022458

结合Lua脚本，在on_draw(...)判读对应的画面、对于控件id，即可绘制到“控件”上层或“已绘制的图形”上。如绘制“水果图片”到蓝色画板上，绘制“小岛图片”到黄色背景上,如下所示

image-20231107105443307

“画布”的大小、位置、类型可以任意，若控件ID、层叠顺序确定好后，一般情况建议如下所示：

[!note|tip:注意] 1.控件类型：静态的控件，如文字、直线、矩形、圆形等，防止被误触或者设置

2.画布大小：1*1大小

3.画布位置：放在不显眼的角落、或编辑区外

image-20231107105624129

1.2 redraw()

发起重绘请求，触发on_draw的执行。

1.3 set_pen_color(color)

设置画笔的颜色，RGB565，用于指定线、矩形、圆等的颜色

  • color：RGB565颜色值

1.4 draw_line(x0,y0,x1,y1,width)

绘制直线

  • x0,y0：起始点坐标
  • x1,y1：结束点坐标
  • width：为线条的厚度，1~10

1.5 draw_rect(x0,y0,x1,y1,fill)

绘制矩形

  • x0,y0：左上角坐标
  • x1,y1：右下角坐标
  • fill：0不填充，1填充

1.6 draw_rect_alpha(x0,y0,x1,y1,alpha)

绘制实心的半透明矩形，F系列不支持

  • x0,y0：左上角坐标
  • x1,y1：右下角坐标
  • alpha：透明度0全透明~255不透明

1.7 draw_circle(x,y,r,fill)

绘制圆形

  • x,y：圆的中心坐标
  • r：圆的半径
  • fill：0不填充，1填充

1.8 draw_ellipse(x0,y0,x1,y1,fill)

绘制椭圆

  • x0,y0：左上角坐标
  • x1,y1：右下角坐标
  • fill：0不填充，1填充

1.9 draw_image(image_id,frame_id,dstx,dsty,width,height,srcx,srcy)

绘制图片

  • image_id图片资源的ID
  • frame_id对应图标，可以设置帧ID，其他图片固定为0
  • dstx图片显示X坐标
  • dsty图片显示Y坐标
  • width图片显示宽度
  • height图片显示高度
  • srcx图片裁剪X坐标
  • srcy图片裁剪Y坐标

[!note|tip:如何确定image_id] 1.在工程目录下的../build/文件夹，打开image.xml文件，image id = "xx"表示第一个参数

image-20231107110143684

1.10 draw_text(text,x,y,w,h,font_id,size,color,align)

显示文字，text字符串

  • x显示X坐标
  • y显示Y坐标
  • w显示宽度
  • h显示高度
  • font_id:索引
  • size:字体大小
  • color颜色RGB565
  • align对齐方式
  • bit0~bit1水平对齐方式，0左对齐，1居中对齐，2右对
  • bit2~bit3垂直对齐方式，0上对齐，1居中对齐，3下对齐

1.11 load_surface (filename)

申请内存，将指定图片内容加载

  • filename：图片文件，支持JPEG/PNG

[!note|tip:注意] 1.工程有播放视频功能，不支持绘制jpg图片

2.一般用于替换logo,客户从U盘/SD卡拷贝到屏内，替换logo

3.png 比较占运行内存信息

1.12 destroy_surface (surface)

销毁图层，释放内存

  • surface：图层资源指针

1.13 destroy_all_surface()

销毁所有图层指针，释放内存

1.14 draw_surface (surface,dstx,dsty,width,height,srcx,srcy)

绘制图层，支持绘制jpg、png格式的图片，在on_draw()系统函数里调用

  • surface：图层资源指针
  • dstx：图片显示X坐标
  • dsty：图片显示Y坐标
  • width：图片显示宽度[可选]
  • height：图片显示高度[可选]
  • srcx：图片裁剪X坐标[可选]
  • srcy：图片裁剪Y坐标[可选]

1.15 get_surface_size (surface)

获取指定图层指针的图像大小，返回，宽度和高度

  • surface：图层资源指针

1.16 clear_image_buffer()

清除内部图片资源缓存

1.17 screen_shoot(filepath)

截取整个屏幕的内容，保存为jpg图片。

  • filepath：图片存储路径

2.工程配置

2.1.绘制键设置

添加15个字设置按钮，用于触发Lua绘制按钮，以“直线”按钮为例，控件配置如下所示：

  1. 写入地址：LW6100

  2. 操作模式：写入常量

    • 常量值：1/2/3/4/5/6/7/8/9/10/11/12/13/14/15(依次为直线/矩形/半透矩形/圆/椭圆/图片ID/文字/屏内图片/销毁图片/销毁所有图片/获取图大小/视频窗口截图/屏幕截图/画SD图/画U盘图片)
  3. 使用图库：√
  4. 使用文字：√

image-20240119135457461

2.2.画笔设置

添加15个位状态指示灯，用来设置画笔颜色，黄色/蓝色之前切换，如下所示：

  1. 写入地址：LW6100
  2. 切换开关：√
  3. 开关类型：切换开关

image-20240119140453567

2.3.文本设置

添加一个文本控件，用于显示图片大小，配置如下所示：

image-20240119140954134

3.Lua 脚本

3.1.画笔

在on_update里面，判断触发地址和键值，若地址为LW6100，值为0画笔为蓝色，值为1画笔为红色，代码如下所示：

penColor = {0xF800, 0x001F}
CUR_COLOR = 0xF800 --初始颜色，

function on_update(slave,vtype,addr)

    if addr == 0x6100
    then
        CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]
    end
    redraw()
end

function on_draw(screen_id,control_id)
    set_pen_color(CUR_COLOR)
end

3.2.直线

3.2.1.Lua

在on_update里面，判断触发地址和键值，若地址为LW6101，值为1，绘制直线，代码如下所示：

mode = {  --绘制类型表
    line          = 1,
    rect          = 2,
    rect_alpha    = 3,
    circle        = 4,
    ellipse       = 5,
    imageId       = 6,
    text          = 7,
    surface_path3 = 8,
    destroyOne    = 9,
    destroyAll    = 10,
    getSurface    = 11,
    videoShoot    = 12,
    screenShoot   = 13,

    surface_pathsd  = 14,
    surface_pathusb = 15

}

function on_update(slave,vtype,addr)

    if addr == 0x6100
    then
        CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]

    elseif addr == 0x6101
    then
        local msg = ''
        draw_type = get_uint16(VT_LW, addr) -- 键值
    end
    redraw()
end

function on_draw(screen_id,control_id)

    set_pen_color(CUR_COLOR)

    local switch = {
        [mode.line] = function(control) -- 键值为1
            draw_line(225, 253, 405, 253)
            draw_line(508, 128, 508, 378, 5)
        end,
    }

    if switch[draw_type]
    then
        switch[draw_type](control)
    end
end

3.2.2.预览

运行预览，点击直线按钮，绘制宽度为1，和宽度为5的直线，设置画笔颜色，直线颜色随着改变，如下所示：

Video_2024-01-19_143205

3.3.矩形

3.2.1.Lua

在on_update里面，判断触发地址和键值，若地址为LW6101，值为2，绘制矩形，代码如下所示：

mode = {  --绘制类型表
    line          = 1,
    rect          = 2,
    rect_alpha    = 3,
    circle        = 4,
    ellipse       = 5,
    imageId       = 6,
    text          = 7,
    surface_path3 = 8,
    destroyOne    = 9,
    destroyAll    = 10,
    getSurface    = 11,
    videoShoot    = 12,
    screenShoot   = 13,

    surface_pathsd  = 14,
    surface_pathusb = 15

}

function on_update(slave,vtype,addr)

    if addr == 0x6100
    then
        CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]

    elseif addr == 0x6101
    then
        local msg = ''
        draw_type = get_uint16(VT_LW, addr) -- 键值
    end
    redraw()
end

function on_draw(screen_id,control_id)

    set_pen_color(CUR_COLOR)

    local switch = {
        [mode.rect] = function(control) --键值2
            draw_rect(225, 128, (225+180), (128+250), 0)--不填充
            draw_rect(418, 163, (418+180), (128+180), 1)--填充
        end,
    }

    if switch[draw_type]
    then
        switch[draw_type](control)
    end
end

3.2.2.预览

运行预览，点击矩形按钮，绘制1个填充，1个不填充的矩形，设置画笔颜色，矩形颜色随着改变，如下所示：

Video_2024-01-19_143445

3.3.半透矩形

3.3.1.Lua

在on_update里面，判断触发地址和键值，若地址为LW6101，值为3，绘制半透矩形，代码如下所示：

mode = {  --绘制类型表
    line          = 1,
    rect          = 2,
    rect_alpha    = 3,
    circle        = 4,
    ellipse       = 5,
    imageId       = 6,
    text          = 7,
    surface_path3 = 8,
    destroyOne    = 9,
    destroyAll    = 10,
    getSurface    = 11,
    videoShoot    = 12,
    screenShoot   = 13,

    surface_pathsd  = 14,
    surface_pathusb = 15

}

function on_update(slave,vtype,addr)

    if addr == 0x6100
    then
        CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]

    elseif addr == 0x6101
    then
        local msg = ''
        draw_type = get_uint16(VT_LW, addr) -- 键值
    end
    redraw()
end

function on_draw(screen_id,control_id)

    set_pen_color(CUR_COLOR)

    local switch = {
        [mode.rect_alpha] = function(control)--键值3
            draw_rect_alpha(225, 128, (225+180), (128+250), 200)--0~255透明度
            draw_rect_alpha(418, 163, (418+180), (128+180), 230)--0~255透明度
        end,
    }

    if switch[draw_type]
    then
        switch[draw_type](control)
    end
end

3.3.2.预览

运行预览，点击矩形按钮，绘制两个半透矩形，1个200透明度，1个230透明度，设置画笔颜色，半透矩形颜色随着改变，如下所示：

Video_2024-01-19_145130

3.4.圆形

3.4.1.Lua

在on_update里面，判断触发地址和键值，若地址为LW6101，值为4，绘制圆形，代码如下所示：

mode = {  --绘制类型表
    line          = 1,
    rect          = 2,
    rect_alpha    = 3,
    circle        = 4,
    ellipse       = 5,
    imageId       = 6,
    text          = 7,
    surface_path3 = 8,
    destroyOne    = 9,
    destroyAll    = 10,
    getSurface    = 11,
    videoShoot    = 12,
    screenShoot   = 13,

    surface_pathsd  = 14,
    surface_pathusb = 15

}

function on_update(slave,vtype,addr)

    if addr == 0x6100
    then
        CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]

    elseif addr == 0x6101
    then
        local msg = ''
        draw_type = get_uint16(VT_LW, addr) -- 键值
    end
    redraw()
end

function on_draw(screen_id,control_id)

    set_pen_color(CUR_COLOR)

    local switch = {
        [mode.circle] = function(control)--键值4
            draw_circle(300, 253, 100, 0) --不填充
            draw_circle(450, 253, 150, 1) --填充
        }        
    end,

    if switch[draw_type]
    then
        switch[draw_type](control)
    end
end

3.4.2.预览

运行预览，点击圆形按钮，绘制1个填充，1个不填充的圆形，设置画笔颜色，圆形颜色随着改变，如下所示：

Video_2024-01-19_145729

3.5.椭圆

3.5.1.Lua

在on_update里面，判断触发地址和键值，若地址为LW6101，值为5，绘制椭圆，代码如下所示：

mode = {  --绘制类型表
    line          = 1,
    rect          = 2,
    rect_alpha    = 3,
    circle        = 4,
    ellipse       = 5,
    imageId       = 6,
    text          = 7,
    surface_path3 = 8,
    destroyOne    = 9,
    destroyAll    = 10,
    getSurface    = 11,
    videoShoot    = 12,
    screenShoot   = 13,

    surface_pathsd  = 14,
    surface_pathusb = 15

}

function on_update(slave,vtype,addr)

    if addr == 0x6100
    then
        CUR_COLOR = penColor[get_uint16(VT_LW, addr) + 1]

    elseif addr == 0x6101
    then
        local msg = ''
        draw_type = get_uint16(VT_LW, addr) -- 键值
    end
    redraw()
end

function on_draw(screen_id,control_id)

    set_pen_color(CUR_COLOR)

    local switch = {
        [mode.ellipse] = function(control)--键值5
            draw_ellipse(225, 128, (225+180), (128+250), 0)--不填充
            draw_ellipse(418, 163, (418+180), (128+180), 1)--填充
        }        
    end,

    if switch[draw_type]
    then
        switch[draw_type](control)
    end
end

3.4.2.预览

运行预览，点击椭圆按钮，绘制1个填充，1个不填充的椭圆，设置画笔颜色，椭圆颜色随着改变，如下所示：

Video_2024-01-19_150242

Copyright ©Dacai all right reserved，powered by Gitbook该文件修订时间： 2024-09-03 17:22:55

results matching ""

    No results matching ""